<template>
	<view class="container">
		<!-- <view class="header">
			<view class="location">

				<block v-if="location != '定位失败'">
					<text class="wlIcon-weizhi">
						当前定位城市：
					</text>
					<span v-if="location == '获取位置中...'">{{location}}</span>
					<span v-else class="location_city" @tap="select_city">{{location}}</span>
				</block>

				<text class="wlIcon-weizhi" v-else @tap="getLocation">
					定位失败（重新定位）
				</text>
			</view>
		</view> -->

		<view class="main">

			<!-- 热门城市 -->
			<view class="hot_city">
				<view class="title">热门城市</view>
				<view class="hot_city_list">
					<view class="hot_city_item" v-for="item in hot_city" @tap="select_hot_city(item)">
						{{item}}
					</view>
				</view>
			</view>

			<transition name="content">
				<view class="content_view">
					<view class="select_top">
						<view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList"
							:key="index" @tap="select_top_item_click(index)">
							<text class="address_value">{{item}}</text>
						</view>
						<view class="indicator" :style="{ left: indicatorStyleLeft + 'px' }" ref="indicator"></view>
					</view>
					<swiper class="swiper" :current="currentIndex" @change="swiperChange">
						<swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
							<view class="swiper-item">
								<scroll-view class="scroll-view-item" scroll-y="true">
									<view class="address_item" v-for="(item,index) in cityAreaArray[swiper_index]"
										:key="index" @tap="address_item_click(swiper_index,index)">
										<image v-if="selectIndexArr[swiper_index] === index" class="address_item_icon"
											:src="$wanlshop.appstc('/common/img_gou3x.png')" mode=""></image>
										{{item.name}}
									</view>
								</scroll-view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hot_city: ['广州', '南京', '上海', '武汉', '北京', '深圳', '成都', '苏州'],
				dataList: ['请选择'],
				currentIndex: 0,
				cityData: {},
				cityAreaArray: [],
				selectIndexArr: [],
				indicatorStyleLeft: 16,
				city: '', // 当前选择的城市
				location: '', // 当前定位的城市
			};
		},
		onLoad() {
			this.getLocation();
		},
		created() {
			uni.request({
				url: `${this.$wanlshop.config('appurl')}/wanlshop/common/area`,
				success: (res) => {
					if (res.data.data.length > 0) {
						this.cityData = res.data.data
						this.cityAreaArray.push(res.data.data)
					} else {
						this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
					}
				}
			});
		},
		mounted() {
			// this.changeIndicator(0)
		},
		methods: {
			// 获取所在城市
			async getLocation() {
				this.location = '获取位置中...';
				let res = await this.$wanlshop.location();
				console.log('获取所在城市', res)
				if (res.code == 1) {
					res = res.data
					this.location = res.address.city;
					this.city = res.address.city;
				} else {
					this.location = '定位失败'
				}
			},
			select_hot_city(param) {
				this.city = param + '市'
				this.select_city();
			},
			select_city() {
				console.log('this.city', this.city)
				// 将选中的城市返回给上一页
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				// #ifdef H5
				prevPage.$vm.city = this.city;
				// #endif
				// #ifdef MP-WEIXIN
				prevPage.setData({
					city: this.city
				});
				// #endif
				uni.navigateBack({ //返回
					delta: 1
				})
			},
			select_top_item_click(index) {
				this.currentIndex = index
				this.changeIndicator(index)
			},
			swiperChange(event) {
				let index = event.detail.current
				this.currentIndex = index
				this.changeIndicator(index)
			},
			changeIndicator(index) {
				let indicatorWidth = 30
				const query = uni.createSelectorQuery().in(this);
				let arr = query.selectAll('.select_top_item .address_value')
				arr.fields({
					size: true,
					scrollOffset: false
				}, data => {

					let itemCenterX = 10 + index * 80 + data[index]["width"] / 2
					let left = itemCenterX - indicatorWidth / 2

					this.indicatorStyleLeft = left
				}).exec();
			},
			address_item_click(swiper_index, index) {
				// console.log(swiper_index,index)
				this.selectIndexArr.splice(swiper_index, 5, index)

				//判断当前是否为最下一级
				if (swiper_index === 0) { //第一级

					let currentObj = this.cityData[index]
					let city = currentObj.name
					this.dataList.splice(swiper_index, 5, city)
					this.dataList.splice(swiper_index + 1, 0, '请选择')
					this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["city"])
					// console.log(this.dataList)
					setTimeout(() => {
						this.currentIndex = 1
						this.changeIndicator(1)
					}, 50);


				} else {
					let currentAreaArray = this.cityAreaArray[swiper_index]
					let currentObj = currentAreaArray[index]
					let area = currentObj["area"]
					// console.log(currentAreaArray)
					if (area !== undefined) {

						let city = currentObj.name

						this.dataList.splice(swiper_index, 5, city)
						// this.dataList.splice(swiper_index + 1, 0, '请选择')
						// this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["area"])

						this.city = city;
						this.select_city();

					}
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	// 不换行
	@mixin no-wrap() {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	page {
		background-color: #fafafa;
	}

	.container {
		color: #3d3d3d;
		font-size: 24rpx;

		.header {
			background-color: #ffffff;

			.location {
				padding: 40rpx;

				.location_city {
					background-color: #f3f3f3;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					text-align: center;
				}
			}
		}

		.main {
			padding: 20rpx 40rpx;

			.hot_city {
				margin-bottom: 40rpx;

				.title {
					margin-bottom: 20rpx;
				}

				.hot_city_list {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 26rpx;

					.hot_city_item {
						background-color: #f3f3f3;
						border-radius: 10rpx;
						padding: 10rpx 30rpx;
						text-align: center;
					}
				}
			}

			.content_view {
				width: 100%;
				height: 70vh;

				.title_view {
					height: 8%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 $uni-spacing-row-sm;

					.title {
						font-size: uni-font-size-sm;
					}

					.close_view {
						height: 40rpx;
						width: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.select_top {
					height: 8%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 20rpx 20rpx 20rpx;
					position: relative;
					box-sizing: border-box;

					.select_top_item {
						width: 160rpx;
						font-size: 28rpx;
						@include no-wrap();
					}

					.indicator {
						position: absolute;
						width: 60rpx;
						height: 4rpx;
						background: $uni-color-error;
						left: 32rpx;
						bottom: 0;
						transition: left 0.5s ease;
					}
				}

				.swiper {
					height: 80%;
					position: relative;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;

					.swiper-item {
						height: 100%;

						.scroll-view-item {
							height: 100%;
							padding: 0 20rpx;

							.address_item {
								padding: 10rpx 0;
								font-size: 28rpx;
								display: flex;
								align-items: center;

								.address_item_icon {
									width: 40rpx;
									height: 40rpx;
									margin-right: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>